<template>
  <div class="">
    <h3>生命周期函数</h3>
    <h4 id="box">{{ msg }}</h4>

    <button @click="num++">改变num</button>
    <h4 id="numbox">{{ num }}</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello",
      num: 0,
    };
  },
  beforeCreate() {
    console.log(this.msg);
  },
  //在这个函数中 data和methods都不能用
  created() {
    console.log(this.msg);
  },
  //这是最早可以使用data和methods的生命周期函数
  beforeMount() {
    console.log(document.getElementById("box").innerHTML);
  },
  //在这个时候 节点还未渲染
  mounted() {
    console.log(document.getElementById("box").innerHTML);
  },
  //在这个时候data和methods 以及dom节点都已经渲染完成

  beforeUpdate() {
    // console.log(this.num);
    // console.log(document.getElementById("numbox").innerHTML);
  },
  //data发生改变 但是视图还没更新 每次只要有data发生改变就会触发这个钩子函数

  updated() {
    console.log(this.num);
    console.log(document.getElementById("numbox").innerHTML);
  },
  //数据改变视图也更新之后

  methods: {},
  components: {},
};
</script>

<style lang="scss"></style>
